<template>
        <el-row>
            <el-col :span="4.5" style="text-align: center; margin: 10px 10px;" v-for="charge in chargers" :key="charge.id">
                <el-card style="width: 180px;">
                <div slot="header" class="clearfix" style="text-align: center;">
                    <div>
                        <span>{{charge.chargerName}}</span>
                        <img :src=orange_logo style="float: right; padding: 3px 0">
                    </div>
                    <img :src="pile_orange" width="50px" style="margin-top: 10px;">
                </div>
                <div>
                    <table>
                        <tr>
                            <td>
                                <span class="pile_info_text">通讯信号</span>
                            </td>
                            <td>
                                <span class="pile_info_text" style="margin-left: 10px;">{{  charge.communicationSignal  }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pile_info_text">今日充电量</span>
                            </td>
                            <td>
                                <span class="pile_info_text" style="margin-left: 10px;">{{  charge.todayPowerNum  }}kwh</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pile_info_text">今日客户量</span>
                            </td>
                            <td>
                                <span class="pile_info_text" style="margin-left: 10px;">{{  charge.todayCustomerNum  }}人</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pile_info_text">今日收款额</span>
                                
                            </td>
                            <td>
                                <span class="pile_info_text" style="margin-left: 10px;">{{  charge.todayAccountNum  }}元</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="pile_info_text">今日单价</span>
                                
                            </td>
                            <td>
                                <span class="pile_info_text" style="margin-left: 10px;">{{  charge.todayPrice  }}元/kwh</span>
                                
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="margin-top: 10px;">
                    <el-button type="primary" plain style="width: 150px; height: 30px;display: flex;align-items: center;justify-content: center;">详 情</el-button>
                </div>
                </el-card>
            </el-col>
    </el-row>
    
</template>

<script>
export default {
    props: {
        chargers:{
            type:undefined,
            default:{}
        }
    },
    data() {
        return {
            orange_logo:require('@/assets/BaiSuXin/status/orange.svg'),
            green_logo:require('@/assets/BaiSuXin/status/green.svg'),
            red_logo:require('@/assets/BaiSuXin/status/red.svg'),
            black_logo:require('@/assets/BaiSuXin/status/black.svg'),
            pile_orange:require('@/assets/BaiSuXin/pile/orange.png'),
            pile_green:require('@/assets/BaiSuXin/pile/green.png'),
            pile_red:require('@/assets/BaiSuXin/pile/red.png'),
            pile_black:require('@/assets/BaiSuXin/pile/black.png'),
        }
    },

    methods: {

    },

}
</script>

<style scoped>
.pile_info_text {
    font-size: 10px;
}
</style>